<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
    <!-- 引入css文件 -->
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>

    <div class="head">
        <ul>
            <li>记</li>
            <li>事</li>
            <li>本</li>
        </ul>
    </div>


    <table>
        <tbody class="zhui">
            <!-- <tr>
                <td>
                    <div class="b">
                        <div class="xiao"></div>
                        <div class="zhu"></div>
                        <div class="bian"></div>
                    </div>
                </td>
            </tr> -->

        </tbody>
    </table>




    </table>


    <form action="" class="di">
        <input type="text" class="ru">
        <button class="xin">
            <ul>
                <li>新</li>
                <li>增</li>
            </ul>
        </button>
        <!-- <ul>
            <li>新</li>
            <li>增</li>
        </ul> -->
    </form>


    <script>
        // arr = [
        //     {
        //         stuid: '',
        //     }
        // ]
        const tbody = document.querySelector('tbody')
        const arr = JSON.parse(localStorage.getItem('data')) || []
        console.log(arr);
        const b = document.querySelector('.b')
        const zhui = document.querySelector('.zhui')
        const xiao = document.querySelector('.xiao')

        const ru = document.querySelector('.ru')
        const di = document.querySelector('.di')
        const xie = document.querySelector('.xie')

        di.addEventListener('submit', function (e) {
            e.preventDefault()
            arr.push({
                stuid: ru.value,
            })
            // this.reset()

            render()
            localStorage.setItem('data', JSON.stringify(arr))
        })


        function render() {
            const myarr = arr.map(function (ele, index) {
                return `
               <tr>
                <td>
                    <div class="b">
                         <a href="" class="xiao" data-id = "${index}">删除</a>
    
                        <div class="zhu">${ele.stuid}</div>
                        <div class="bian">编辑</div>
                    </div>

                </td>
            </tr>
                        
                `
            })
            // console.log(myarr);
            zhui.innerHTML = myarr.join('')

        }

        render()

        tbody.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {

                arr.splice(e.target.dataset.id, 1)


                localStorage.setItem('data', JSON.stringify(arr))
            }

        }

        )

    </script>
</body>

</html>